<script setup lang="ts">
import { onActivated } from "vue";
import { onBeforeRouteLeave } from "vue-router";
import BenchCollect from "./component/BenchCollect.vue";
import BenchTask from "./component/BenchTask.vue";
import Weather from "./component/Weather.vue";
defineOptions({
  name: "ALL_BENCH_HOME"
});
</script>

<template>
  <div class="bench-common">
    <px-scrollbar>
      <div class="bench-common-container">
        <div class="flex">
          <div class="grow">
            <BenchCollect />
          </div>
          <div v-has="'ALL_BENCH_TASK_WEATHER'" class="shrink">
            <Weather />
          </div>
        </div>
        <BenchTask />
      </div>
    </px-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.bench-common {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 180px);
}

.bench-common-container {
  width: 100%;
  overflow-x: hidden;
}

.flex {
  display: flex;
}

.grow {
  flex-grow: 1;
  width: 25%;
}

.shrink {
  flex-shrink: 0;
  margin-left: 16px;
}

.bench-common-top {
  display: flex;
}
</style>
